<template>
	<div>
		<div class="item">
			<div class="label">请假类型</div>
			<div class="value">
				<el-select v-model="formData.type">
					<el-option
						v-for="(item, index) in typeList"
						:key="index"
						:value="item.holidayTypeId"
						:label="item.holidayTypeEntity.name"
					>
						<span style="padding: 0 20px;">
							{{ item.holidayTypeEntity.name }}
							{{
								item.holidayTypeEntity.isLimit == 1
									? `(剩余 ${item.surplusAmount} ${unit[item.holidayTypeEntity.unit]})`
									: ""
							}}
						</span>
					</el-option>
				</el-select>
			</div>
		</div>
		<fortress-date-time-stat-day v-model="formData"></fortress-date-time-stat-day>
		<div class="item">
			<div class="label">总时长</div>
			<div class="value">{{ total }} {{ checkUnit }}</div>
		</div>
	</div>
</template>

<script>
import request from "@/common/request"

export default {
	model: {
		prop: "value",
		event: "update:value",
	},
	props: {
		disabled: {
			type: Boolean,
			default: false,
		},
		size: {
			type: String,
			default: "medium",
		},
		readonly: {
			type: Boolean,
			default: false,
		},
		value: {},
	},
	data() {
		return {
			typeList: [],
			formData: {
				type: "",
				startTime: "",
				endTime: "",
				startType: "",
				endType: "",
				leaveDuration: "",
			},
			unit: {
				1: "天",
			},
		}
	},
	computed: {
		total() {
			if (this.formData.startTime && this.formData.endTime) {
				const startTime = new Date(this.formData.startTime)
				const endTime = new Date(this.formData.endTime)
				const total = endTime.getTime() - startTime.getTime()
				const totalDay = total / 1000 / 60 / 60 / 24
				if (this.formData.startType === "am" && this.formData.endType === "pm") {
					return totalDay + 1
				}
				if (this.formData.startType === this.formData.endType) {
					return totalDay + 0.5
				}
				return totalDay
			}
			return 0
		},
		checkUnit() {
			const item = this.typeList.find(item => item.holidayTypeId == this.formData.type)
			if (item) {
				const unit = item.holidayTypeEntity.unit
				return unit ? this.unit[unit] : ""
			}
			return ""
		},
	},
	async mounted() {
		try {
			const { code, data } = await request("get", "/oa/userHolidaySetting/list")
			if (code != 0) {
				throw new Error("获取请假类型失败")
			}
			this.typeList = data
		} catch (error) {
			this.$message.error(error)
		}
	},
	methods: {},
	watch: {
		formData: {
			handler(value) {
				this.$emit("update:value", { ...value, leaveDuration: this.total })
			},
			deep: true,
		},
		value: {
			handler(value) {
				if (value.type != this.formData.type) {
					this.formData.type = value.type
				}
				if (value.startTime != this.formData.startTime) {
					this.formData.startTime = value.startTime
				}
				if (value.endTime != this.formData.endTime) {
					this.formData.endTime = value.endTime
				}
				if (value.startType != this.formData.startType) {
					this.formData.startType = value.startType
				}
				if (value.endType != this.formData.endType) {
					this.formData.endType = value.endType
				}
				if (value.leaveDuration != this.formData.leaveDuration) {
					this.formData.leaveDuration = value.leaveDuration
				}
			},
			deep: true,
		},
	},
}
</script>

<style lang="scss" scoped>
.item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 15px;
	.label {
		width: 100px;
		flex: none;
		text-align: right;
		font-size: 14px;
		color: #606266;
		&::before {
			content: "*";
			color: #f00;
			padding-right: 5px;
			vertical-align: middle;
			font-size: 12px;
		}
	}
	.value {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		overflow: hidden;
		padding-left: 15px;
	}
}
</style>
